<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户中心</title>
    <link href="/Public/css/animate.css" rel="stylesheet">
    <link rel="stylesheet" href="/Public/css/bootstrap.min.css">
    <link rel="stylesheet" href="/Public/css/gxxjkefu-normalize.css">
    <link rel="stylesheet" href="/Public/css/model.css">
    <link rel="stylesheet" href="/Public/css/pager.css">
    <style>

        body{
            font-size: 12px;
        }

        .user_name{
            cursor: pointer;
            color: black;
        }
        .user_name:hover{
            color: #31b0d5;
        }
        .search_user {
            padding: 20px 0;
            border-bottom: dashed 1px #c9c9c9;
        }
        .search_div {
            width: 790px;
            height: 40px;
            margin: 0 auto;
            padding-top: 10px;
            position: relative;
        }
        .search_div button {
            width: 103px;
            height: 33px;
            position: absolute;
            top: 10px;
            right: 0;
        }

        .search_button {
            width: 1200px;
            text-align: center;
            padding: 25px 0 40px;
            margin: 0 auto;
        }

        .search_button input {
            border: none;
            padding: 5px 15px;
            border-radius: 3px;
            margin: 0 12px;
            background: #eeeeee;
        }

        .search_button input:hover {
            background-color: #46b8da;
            color: white;
        }

        .search_button .input_active {
            background-color: #46b8da;
            color: white;
        }

        .search_table thead {
            background: #f0f8fa;
            border: none;
        }

        .table {
            margin: 0 auto;
            width: 100% !important;
            text-align: center;
        }

        .table > thead > tr > th {
            border-bottom: none !important;
            text-align: center !important;
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            border-top: 1px solid #f0f8fa !important;
            text-align: center !important;
        }
    </style>

</head>
<body>
<div id="main_C"  class="animated fadeInRight">
    <div class="search_user">
        <div class="form-group search_div">
            <div class="input-group col-xs-12">
                <div class="input-group-btn">
                    <select id="select" name="type" class="form-control"
                            style="width: 100px;color: #959595;background: #eeeeee;border-bottom-left-radius: 3px;border-top-left-radius: 3px;">
                        <option value="3">ID</option>
                        <option value="1">姓名</option>
                        <option value="2">号码</option>

                    </select>
                </div>
                <input style="width: 565px;" type="text" name="keyword" id="keyword" class="form-control">
            </div>
            <button style="" class="btn btn-info" id="search_submit" type="submit" onclick="search_user()">搜索</button>
        </div>
    </div>
    <div class="search_button">
        <input class="input_active" type="button" value="我的客户"/>
        <input type="button" value="已借贷客户"/>
        <input type="button" value="未借贷客户"/>
        <input type="button" value="逾期客户"/>
        <input type="button" value="坏账客户"/>
    </div>
    <div class="search_table">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>用户ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>手机号码</th>
                <th>创建时间</th>
                <th>最后沟通时间</th>
            </tr>
            </thead>
            <tbody id="user_list">

            </tbody>
        </table>

        <div id="my_page" style="text-align: center;margin: 100px auto 0">
            <ul class="pagination" id="page"></ul>
            <div class="pageJump">
                <span>跳转到</span>
                <input type="text"/>
                <span>页</span>
                <button type="button" class="button"></button>
            </div>
        </div>
    </div>
</div>
<script src="/Public/js/jquery-3.2.1.js"></script>
<script src="/Public/js/pager.js"></script>

<script>
    //调用父方法
    function user_info(mobile) {
        console.log('useree',mobile);
        window.parent.get_user(mobile);
    }
    //搜索
    function search_user() {
        var value = document.getElementById("select").value;
        var search = document.getElementById("keyword").value;
        $.post("<{$SERVER_NAME}>/UserCenter/user_list", {value: value, search: search}, function (data) {

            if (data.code == '1001') {
                var obj = data.result;
                var len = obj.length;
                var s = "";
                if (data.count < 10) {
                    $("#my_page").hide();
                } else {
                    $("#my_page").show();
                }
                for (var i = 0; i < len; i++) {
                    var j = i + 1;
                    s += "  <tr> <th scope='row'>" + obj[i].user_id  + "</th>  <td> <a class='user_name' onclick=user_info('"+ obj[i].mobile+"')>" + obj[i].truename + " </a></td><td>" + obj[i].sex + "</td> <td>" + obj[i].user_mobile + "</td> <td>" + obj[i].ctime + "</td> <td>"+obj[i].upd_time+"</td> </tr>";
                }
                document.getElementById("user_list").innerHTML = s;
            }
        });

    }

    var total = "<{$total}>";
    Page({
        num: total,					//页码数
        startnum: 1,				//指定页码
        elem: $('#page'),		//指定的元素
        callback: function (n) {	//回调函数
            get_user(1, n);
        }
    });
    get_user(1, 1);
    function get_user(type, n) {
        $.post("<{$SERVER_NAME}>/UserCenter/user_list", {type: type, page: n}, function (data) {
            console.log('ttttt',data);
            if (data.code == '1001') {
                var obj = data.result;
                var len = obj.length;
                var s = "";
                if (data.count <=10) {
                    $("#my_page").hide();
                } else {
                    $("#my_page").show();
                }
                for (var i = 0; i < len; i++) {
                    var j = i + 1;
                    s += "  <tr> <th scope='row'>" + obj[i].user_id+ "</th> <td> <a class='user_name' onclick=user_info('"+ obj[i].user_id+"')>" + obj[i].truename + "</a></td> <td>" + obj[i].sex + "</td> <td>" + obj[i].user_mobile + "</td> <td>" + obj[i].ctime + "</td> <td>"+obj[i].upd_time+"</td> </tr>";
                }
                document.getElementById("user_list").innerHTML = s;
            }
        });
    }
    $(document).ready(function () {
        $(".search_button  input").click(function () {
            $(".search_button").find("input").removeClass("input_active");
            $(this).addClass("input_active");

            var index = $(this).index() + 1;
            console.log('123', index);
            $.post("<{$SERVER_NAME}>/UserCenter/user_list", {type: index}, function (data) {
                console.log('09090', data);
                if (data.code == '1001') {
                    var obj = data.result;
                    var len = obj.length;
                    var s = "";
                    if (data.count <= 10) {
                        $("#my_page").hide();
                    } else {
                        $("#my_page").show();
                    }
//                            /*分页*/
                    Page({
                        num: data.tol,					//页码数
                        startnum: 1,				//指定页码
                        elem: $('#page'),		//指定的元素
                        callback: function (n) {	//回调函数
                            get_user(index, n);
                        }
                    });
                    for (var i = 0; i < len; i++) {
                        var j = i + 1;
                        s += "  <tr> <th scope='row'>" + obj[i].user_id + "</th> <td> <a class='user_name' onclick=user_info('"+ obj[i].user_id+"')>" + obj[i].truename + "</a></td> <td>" + obj[i].sex + "</td> <td>" + obj[i].user_mobile + "</td> <td>" + obj[i].ctime + "</td> <td>"+obj[i].upd_time+"</td> </tr>";
                    }
                    document.getElementById("user_list").innerHTML = s;
                }
            });
        });
    });
</script>
</body>
</html>